<template>
  <div class="box">
    <aside-box>
      <template #zh> 地图 </template>
      <template #en> map chart </template>
      <div class="map" ref="mapRef"></div>
    </aside-box>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { mapData } from "@/utils/geo";
// console.log(mapData());
function createGlowLineData(geoJson) {
  let linedata = [];
  geoJson.features.forEach(function (v) {
    v.geometry.coordinates.forEach(function (x) {
      linedata.push(x);
    });
  });

  return linedata.map(function (busLine, idx) {
    var points = [];
    for (var i = 0; i < busLine[0].length; i += 1) {
      points.push([busLine[0][i][0], busLine[0][i][1]]);
    }
    return {
      coords: points,
      lineStyle: { normal: { color: "#00FFFF" } },
    };
  });
}
let busLines;
onMounted(() => {
  //   busLines = createGlowLineData(mapData());
  //   console.log("busLines ", busLines);
});

echarts.registerMap("南京", { geoJSON: mapData() });
const option = {
  geo3D: {
    type: "map",
    map: "南京",
    roam: true, // 滚轮控制缩放/拖拽
    layoutCenter: ["30%", "30%"], // 控制地图中心位置，可以是百分比或具体像素值
    // layoutSize: "10%", // 控制地图大小，可以是百分比或具体像素值
    regionHeight: 5.1, //地图厚度
    label: {
      show: true,
      color: "#fff",
      fontSize: 14,
      fontFamily: "阿里妈妈数黑体 Bold",
    },
    itemStyle: {
      borderWidth: 3, //分界线宽度
      borderColor: "#fff", //分界线颜色
      color: "rgba(0, 255, 255, 0.3)",
    },
    regions: [
      {
        name: "玄武区",
        itemStyle: {
          areaColor: "#00FF9D",
          color: "#00FF9D",
        },
      },
      {
        name: "江宁区",
        itemStyle: {
          areaColor: "rgba(37, 85, 244,1)",
          color: "rgba(37, 85, 244,1)",
        },
      },
    ],
    viewControl: {
      distance: 90, // 地图视角 控制初始大小
      beta: 55, //旋转视角
      alpha: 35, //视角
      center: [50, 10, 50],
    },
  },
};
const [mapRef] = useEcharts(option);
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  background: rgb(8, 32, 63);
  .map {
    width: 100%;
    height: 600px;
  }
}
</style>